<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>进度条</title>
		<!-- vue前端js框架 -->
		<script src="../js/vue.js"></script>
		<!-- 这个一定在vue.js前端框架的后面 -->
		<script src="../js/elementui.js"></script>
		<link rel="stylesheet" href="../css/index.css">
	</head>

	<body>
		<div id="app">
			<el-progress :percentage="50"></el-progress>
			<el-progress :percentage="100" :format="format"></el-progress>
			<el-progress :percentage="100" status="success"></el-progress>
			<el-progress :percentage="100" status="warning"></el-progress>
			<el-progress :percentage="50" status="exception"></el-progress>
			<hr />

			<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
			<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
			<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
			<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
			<hr />

			<el-progress type="circle" :percentage="0"></el-progress>
			<el-progress type="circle" :percentage="25"></el-progress>
			<el-progress type="circle" :percentage="100" status="success"></el-progress>
			<el-progress type="circle" :percentage="70" status="warning"></el-progress>
			<el-progress type="circle" :percentage="50" status="exception"></el-progress>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {

			},
			methods: {
				format(percentage) {
					return percentage === 100 ? '满' : '${percentage}%';
				}
			}
		})
	</script>

</html>